/* 内河涌单挑河流信息 弹框
* @ 劳兆城
* @ 2017-08-10*/

<template>
	<interact-model
		ref="interact-model"
		class="singleWaterNet-model"
		:title="singleWaterNetName"
		:isCancel="true"
		@cancel="cancel">
		<div class="singleWaterNet-head">
			<Tabs @on-click="tabClick" v-model="tabActive" type="card" :animated="false">
				<Tab-pane label="基本信息" name="water-base"></Tab-pane>
				<Tab-pane label="桩端信息" name="water-pile"></Tab-pane>
				<Tab-pane label="河涌景观" name="water-profile"></Tab-pane>
				<Tab-pane label="河涌巡查信息" name="water-patrol"></Tab-pane>
				<Tab-pane label="排水口信息" name="water-outfall"></Tab-pane>
				<Tab-pane label="水质情况" name="water-quality"></Tab-pane>
				<Tab-pane label="水质趋势图" name="water-picture"></Tab-pane>
				<Tab-pane label="水位曲线图" name="water-level"></Tab-pane>
				<Tab-pane label="整治方案" name="water-renovation"></Tab-pane>
				<Tab-pane label="建筑物信息" name="water-build"></Tab-pane>
				<Tab-pane label="河长信息" name="water-river"></Tab-pane>
				<Tab-pane label="河长工作档案" name="water-document"></Tab-pane>
			</Tabs>
		</div>
		<div class="singleWaterNet-content">
			<component class="component" :is="view"></component>
		</div>
		<loading v-show="showLoading"></loading>
	</interact-model>
</template>

<script>
import waterBase from './singleWaterNet/waterBase.vue'
import waterPile from './singleWaterNet/waterPile.vue'
import waterProfile from './singleWaterNet/waterProfile.vue'
import waterPatrol from './singleWaterNet/waterPatrol.vue'
import waterOutFall from './singleWaterNet/waterOutFall.vue'
import waterQuality from './singleWaterNet/waterQuality.vue'
import waterPicture from './singleWaterNet/waterPicture.vue'
import waterLevel from './singleWaterNet/waterLevel.vue'
import waterRenovation from './singleWaterNet/waterRenovation.vue'
import waterBuild from './singleWaterNet/waterBuild.vue'
import waterRiver from './singleWaterNet/waterRiver.vue'
import waterDocument from './singleWaterNet/waterDocument.vue'

import { mapGetters } from 'vuex'
import { loadingMixin, interactModelMixin } from 'common/js/mixins'

export default {
  mixins: [loadingMixin, interactModelMixin],
  components: {
    'water-base': waterBase,
    'water-pile': waterPile,
    'water-profile': waterProfile,
    'water-patrol': waterPatrol,
    'water-outfall': waterOutFall,
    'water-quality': waterQuality,
    'water-picture': waterPicture,
    'water-level': waterLevel,
    'water-renovation': waterRenovation,
    'water-build': waterBuild,
    'water-river': waterRiver,
    'water-document': waterDocument
  },
  computed: {
    ...mapGetters(['singleWaterNetInfo', 'singleWaterNetName'])
  },
  watch: {
    singleWaterNetInfo () {
      this.showLoading = false
    }
  },
  mounted () {
    // this.show();
  },
  data () {
    return {
      tabActive: 'water-base',
      view: 'water-base',
      showLoading: true
    }
  },
  methods: {
    tabClick (name) {
      this.view = name
    },
    cancel () {
      setTimeout(() => {
        this.tabActive = 'water-base'
        this.view = 'water-base'
      }, 400)
    },
    show () {
      this.$refs['interact-model'].showModel()
    }
  }
}
</script>

<style lang="scss">
.singleWaterNet-model {
  width: 900px;
  height: 600px;
  .singleWaterNet-head {
    width: 100%;
    height: 32px;
    z-index: 10;
    position: absolute;
    top: 4px;
    .ivu-tabs-bar {
      margin: 0 !important;
    }
    .ivu-tabs-tab {
      padding: 5px 6px 4px !important;
      font-size: 12px;
    }
  }
  .singleWaterNet-content {
    width: 100%;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    top: 40px;
  }
}
</style>
